<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>

		<!-- 搜索框 -->
		<view class="content-search">
			<view class="content-search-left" @tap="goback">
				<u-icon name="arrow-leftward" size="24px"></u-icon>
			</view>
			<view class="content-search-right">
				<u--input v-model:value="searchName" border="bottom" :clearable="true"></u--input>
			</view>
		</view>

		<!-- tab切换 -->
		<view class="tabs">
			<u-tabs :list="tabs" :current="current" @change="change"></u-tabs>
		</view>

		<swiper :current="current" @change="changCurrent" class="swiper-info">
			<!-- 单曲 -->
			<swiper-item>
				<Single :searchmsg="tabs[current].list"></Single>
			</swiper-item>

			<!-- 歌单 -->
			<swiper-item>
				<SongList :songlist="tabs[current].list"></SongList>
			</swiper-item>

			<!-- 视频 -->
			<swiper-item>
				<VodioList :video="tabs[current].list"></VodioList>
			</swiper-item>

			<!-- 歌手 -->
			<swiper-item>
				<AristList :artist="tabs[current].list"></AristList>
			</swiper-item>

			<!-- 专辑 -->
			<swiper-item>
				<Album :albums="tabs[current].list"></Album>
			</swiper-item>

			<!-- 用户 -->
			<swiper-item>
				<UserList :users="tabs[current].list"></UserList>
			</swiper-item>
			
			<!-- 播客 -->
			<swiper-item>
				<BroadList :djRadios="tabs[current].list"></BroadList>
			</swiper-item>
		</swiper>
		<view class="">
			<play></play>
		</view>
	</view>
</template>
<script>
	// 引入网络请求
	import {
		getmylist,
	} from '@/http/search2.js'

	// 引入组件
	import play from '@/components/plays.vue';
	import BroadList from '@/view/BroadList/BroadList.vue';
	import Single from '@/view/Single/Single.vue';
	import SongList from '@/view/SongList/SongList.vue';
	import VodioList from '@/view/VudioList/VudioList.vue';
	import AristList from '@/view/AristList/AristList.vue';
	import Album from '@/view/Album/Album.vue';
	import Broad from '@/view/Broad/Broad.vue';
	import UserList from '@/view/UserList/UserList.vue';
	export default {
		// 注册组件
		components: {
			play,
			BroadList,
			Single,
			SongList,
			VodioList,
			AristList,
			Album,
			Broad,
			UserList
		},
		data() {
			return {
				searchName: '', //输入的值
				current: 0, //下标值
				windowHeight: '', //屏幕高度
				swiperCurrent: 0,
				tabs: [{
						name: '单曲',
						type: "1",
						list: [],
						pageNo: 1,
						totalPageNo: 0,
						isGet: false,
						key: "song",
					},
					{
						name: '歌单',
						type: "1000",
						list: [],
						pageNo: 1,
						totalPageNo: 0,
						isGet: false,
						key: "playlist",
					},
					{
						name: '视频',
						type: "1014",
						list: [],
						pageNo: 1,
						totalPageNo: 0,
						isGet: false,
						key: "video",
					},
					{
						name: '歌手',
						type: "100",
						list: [],
						pageNo: 1,
						totalPageNo: 0,
						isGet: false,
						key: 'artist',
					},
					{
						name: '专辑',
						type: "10",
						list: [],
						pageNo: 1,
						totalPageNo: 0,
						isGet: false,
						key: "album",
					},
					{
						name: '用户',
						type: "1002",
						list: [],
						pageNo: 1,
						totalPageNo: 0,
						isGet: false,
						key: "userprofile",
					},
					{
						name: '播客',
						type: "1009",
						list: [],
						off: 1,
						totalPageNo: 0,
						isGet: false,
						key: "djRadio",
					}
				], //tab切换栏


			}
		},

		mounted() {
			// 挂载网络请求
			this._getmylist()
		},
		onReachBottom() {
			this._getmylist()
		},
		methods: {

			// 获取歌曲
			async _getmylist() {
				const el = this.tabs[this.current]
				if (el.isGet && el.total == 0) return
				if (el.isGet && el.pageNo >= el.total) {
					uni.showToast({
						title: "没有更多了",
						icon: "none",
						mask: true,
					})
					return
				}
				uni.showLoading()
				const params = {
					keywords: this.searchName,
					limit: 30,
					offset: el.pageNo,
					type: el.type,
				}
				const {
					result: res
				} = await getmylist(params)
				const total = res[el.key + 'Count'] //总条数	
				const list = res[el.key + 's']
				this.tabs[this.current].total = Math.ceil(total / 30)
				this.tabs[this.current].list.push(...list)
				this.tabs[this.current].pageNo += 1
				this.tabs[this.current].isGet = true
				uni.hideLoading()
			},

			//点击选中哪个tab为激活状态
			change(item) {
				console.log(item);
				this.current = item.index
				this._getmylist()
			},
			changCurrent(e) {
				this.current = e.detail.current
				this._getmylist()
			},

			// 回到上一个页面
			goback() {
				uni.redirectTo({
					url: "/view/Search/Search"
				})
			},
		},

		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			// 获取传过来的搜索值
			this.searchName = option.SearchList
		},
	}
</script>

<style lang="scss">
	// 占位
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	//导航条
	.content {
		position: relative;
		font-family: STXihei;
		background-color: #F5F5F5;

		&-search {
			height: 80rpx;
			display: flex;

			&-left {
				width: 45px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&-right {
				flex: 1;
				width: 90%;
				padding: 0 15px;
				margin: 0 auto;
			}
		}
	}

	// 综合歌单

	.swiper-info {
		height: calc(100vh - 84px);

		&-scroll {
			margin-top: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			padding: 0 5rpx;
			height: calc(100vh - 114px);



			&-item {
				height: 100vh;

				&-scroll {
					margin-top: 10px;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					padding: 0 5rpx;

					&-next {
						font-size: 26upx;
						background-color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx 0;
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;
						margin: 0 15px;
					}
				}
			}
		}
	}
</style>
